<template>
  <!-- 选择器 -->
  <div class="pho-form-item">
    <van-field
      v-bind="$attrs"
      :value="text"
      :label="showLabel ? $attrs.label : ''"
      :name="$attrs.__vModel__"
      input-align="right"
      theme="round"
      readonly
      clickable
      is-link
      @click="onClick"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="options"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "phone-form-select",
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    value: {
      type: [Number, String],
      default: 0,
    },
    // 是否展示标题
    showLabel: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      showPicker: false,
    };
  },
  computed: {
    // 选择器选项
    options() {
      let opts = this.$attrs?.options || [];
      return opts.map((item) => {
        return { text: item.label, value: item.value };
      });
    },
    // 显示的文字
    text() {
      return this.options.find((item) => item.value == this.value)?.text || "";
    },
  },
  methods: {
    onClick() {
      if (!this.$attrs.disabled) {
        this.showPicker = true;
      }
    },
    // 确认选中
    onConfirm(value) {
      this.$emit("update", value.value);
      this.showPicker = false;
    },
  },
};
</script>

<style lang="scss" scoped></style>
